import { createFileRoute } from '@tanstack/react-router'
import { motion } from 'framer-motion'
import section2Image1 from '@/assets/images/technology-application/section2-image1.webp'
import section2Image2 from '@/assets/images/technology-application/section2-image2.webp'
import section2Image3 from '@/assets/images/technology-application/section2-image3.webp'
import section3Icon1 from '@/assets/images/technology-application/section3-icon1.svg'
import section3Icon2 from '@/assets/images/technology-application/section3-icon2.svg'
import section3Icon3 from '@/assets/images/technology-application/section3-icon3.svg'
import section3Icon4 from '@/assets/images/technology-application/section3-icon4.svg'
import titleIcon from '@/assets/images/value-module/title-icon.svg'

export const Route = createFileRoute('/_no-auth/technology-application/')({
  component: Text,
})

function Text() {
  const section3List = [
    {
      icon: section3Icon1,
      title1: 'Brain FI-脑控专注力',
      title2: '(游戏情景式)检测训练技术',
      message:
        '专注力与额叶、枕叶等大脑功能监测 <br/>' +
        '专注力与成长期体质体质等功能监测 <br/>' +
        '能从专注力(数值)表达,了解孩子成长期大脑发育和体质状态情绪心理状态等',
    },
    {
      icon: section3Icon2,
      title1: 'Brain LD-学习内驱力',
      title2: '(个人优势特征)测评训练技术',
      message:
        '现代教育体系的主要目标之一:是帮助孩子 <br/>' +
        '学习内驱力的蓬勃发展……在教育中希望提 <br/>' +
        '高孩子的学习内驱力，先要识别孩子的大脑 <br/>' +
        '优势特征，还要最大限度地培养优势发展的 <br/>' +
        '兴趣，并协助减少焦虑情绪……',
    },
    {
      icon: section3Icon3,
      title1: 'Brain FT-学习疲劳与PSD',
      title2: '情绪测评训练技术',
      message:
        '学习疲劳与心理情绪: <br/>' +
        '在青少年在成长时期,如长期承载高强度学业压力会带来紧张焦虑的情绪,这高频神经活动会消耗体能(ATP)、影响大脑皮层功能,表现为对学习有......',
    },
    {
      icon: section3Icon4,
      title1: 'CBT-运动康复与认知行为',
      title2: '生理心理测评训练技术',
      message:
        '青少年成长期的各个阶段，其心理生理的成 <br/>' +
        '长规律，巩固青少年成长期的健康与认知神 <br/>' +
        '经、情绪、内分泌、免疫体质有密切的特征 <br/>' +
        '表达……',
    },
  ]
  return (
    <div className={'layout_top min-h-screen overflow-hidden bg-[#FAFAFA]'}>
      {/*  section1 */}
      <motion.div
        initial={{ opacity: 0 }}
        whileInView={{ opacity: 1 }}
        transition={{ duration: 1 }}
        className={
          "layout relative bg-[url('@/assets/images/technology-application/section1-bg.webp')]" +
          ' 3xl:pt-[13.3rem] bg-cover bg-no-repeat pt-24 pb-0 lg:pt-[15rem] lg:pb-4' +
          " lg:bg-[url('@/assets/images/technology-application/section1-bg-pc.webp')]"
        }
      >
        <h1 className={'text-primary layout-h1 leading-line-1 font-bold'}>
          新佰时·技术
        </h1>
        <div
          className={
            'bg-primary 3xl:text-[3.5rem] leading-line-2 3xl:px-6 relative z-10 mt-2 font-extralight' +
            ' inline-block lg:px-2' +
            ' lg:text-4xl' +
            ' px-[.8rem]' +
            ' text-xl' +
            ' text-white'
          }
        >
          <span className={'3xl:text-6xl font-bold lg:text-4xl'}>NBT-</span>
          Technology
        </div>
        {/*line*/}
        <ul
          className={
            '3xl:space-y-20 absolute right-0 bottom-0 flex w-full flex-col items-end space-y-10' +
            ' lg:space-y-16'
          }
        >
          <li
            className={'bg-primary layout-left right-0 h-[0.125rem] lg:h-3'}
          ></li>
        </ul>
      </motion.div>
      {/*  section2 */}
      <ul
        className={'layout 3xl:space-y-32 space-y-10 pt-16 pb-20 lg:space-y-20'}
      >
        <li
          className={
            'lg:flex lg:flex-row-reverse lg:items-center lg:justify-between'
          }
        >
          <motion.img
            initial={{ opacity: 0, x: 80 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 1 }}
            className={'3xl:w-[43.375rem] w-full lg:w-[32rem]'}
            src={section2Image1}
            alt='EEG脑电生物检测反馈技术'
          />
          <motion.div
            initial={{ opacity: 0, x: -80 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 1 }}
            className={'mt-10 lg:mt-0 lg:w-[42%]'}
          >
            <p className={'3xl:text-base text-xs text-[rgba(0,0,0,0.35)]'}>
              <img
                src={titleIcon}
                className={'mr-1 inline w-1.5 lg:w-2'}
                alt='icon'
              />
              EEG biotechnology-brainwave detection feedback
            </p>
            <h2
              className={
                'text-primary leading-line-1 layout-h2 mt-1 mb-2 font-bold lg:flex lg:items-start lg:justify-start'
              }
            >
              <span>01、</span>
              <span>EEG脑电生物检测反馈技术</span>
            </h2>
            <p className={'leading-line-1 text-text-85 text-sm lg:text-sm'}>
              EEG
              -脑电生物检测反馈技术是目前具有广泛影响力的核心技术方向，包括脑电生物反馈与脑电生物测评。
            </p>
            <p
              className={'leading-line-1 text-text-85 mt-6 text-sm lg:text-sm'}
            >
              该技术经权威机构验证，EEG 单极导联精准{'>'}
              95%，达到医疗科研级前沿水平。通过采集大脑电生理信号（EEG)，对额叶、顶叶、叶、颞叶及大脑皮层网络系统建立分析模型与科学算法，精准解读……
            </p>
          </motion.div>
        </li>

        <li
          className={'lg:flex lg:flex-row lg:items-center lg:justify-between'}
        >
          <motion.img
            initial={{ opacity: 0, x: -80 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 1 }}
            className={'3xl:w-[43.375rem] w-full lg:w-[32rem]'}
            src={section2Image2}
            alt='PSD-AI'
          />
          <motion.div
            initial={{ opacity: 0, x: 80 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 1 }}
            className={'mt-10 lg:mt-0 lg:w-[42%]'}
          >
            <p className={'3xl:text-base text-xs text-[rgba(0,0,0,0.35)]'}>
              <img
                src={titleIcon}
                className={'mr-1 inline w-1.5 lg:w-2'}
                alt='icon'
              />
              PSD-AI Emotion Visualization Detection Series (II)
            </p>
            <h2
              className={
                'text-primary leading-line-1 layout-h2 mt-1 mb-2 font-bold lg:flex lg:items-start lg:justify-start'
              }
            >
              <span>02、</span>
              <span>PSD-AI情绪可视化检测系列(II)</span>
            </h2>
            <p className={'leading-line-1 text-text-85 text-sm lg:text-sm'}>
              领头扬弱磁场检测系统与方法：细胞生物测控技术
            </p>
            <p
              className={'leading-line-1 text-text-85 mt-6 text-sm lg:text-sm'}
            >
              CFS/LHPA-细胞线粒体氧化反应动态检测：
              通过人体细胞生物电与磁场与细胞氧化反应表达。可适用学习及职业倦怠、疲劳障碍、情绪应激、大脑神经、内分泌及免疫功能方面的检测......
            </p>
          </motion.div>
        </li>

        <li
          className={
            'lg:flex lg:flex-row-reverse lg:items-center lg:justify-between'
          }
        >
          <motion.img
            initial={{ opacity: 0, x: 80 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 1 }}
            className={'3xl:w-[43.375rem] w-full lg:w-[32rem]'}
            src={section2Image3}
            alt='强脑Me5 专注力测评技术-PSD 版'
          />
          <motion.div
            initial={{ opacity: 0, x: -80 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 1 }}
            className={'mt-10 lg:mt-0 lg:w-[42%]'}
          >
            <p className={'3xl:text-base text-xs text-[rgba(0,0,0,0.35)]'}>
              <img
                src={titleIcon}
                className={'mr-1 inline w-1.5 lg:w-2'}
                alt='icon'
              />
              Qiangnao Me5 Concentration Assessment Technology-PSD Version
            </p>
            <h2
              className={
                'text-primary leading-line-1 layout-h2 mt-1 font-bold lg:flex lg:items-start lg:justify-start'
              }
            >
              <span>03、</span>
              <span>强脑Me5专注力领头扬 PSD-AI 情绪可视化检测系列(Ⅲ)</span>
            </h2>
            <p
              className={
                'text-primary 3xl:text-3xl mb-2 text-xl font-normal lg:pl-[20%] lg:text-xl'
              }
            >
              (PSD 学习认知与大脑优势发展测评)
            </p>
            <p className={'leading-line-1 text-text-85 text-sm lg:text-sm'}>
              应用BCI、EEG 等脑电生物技术，为项目服务赋能：
              1、学习认知功能（记忆学习、思维逻辑、认知技能、统筹执行等）;
              2、社会情绪功能（情绪压力、认知障碍、焦虑抑郁等）；3、行为调节功能（CCFS，学习疲劳，睡眠障碍）；4、细胞生物功能（情绪应激、神经内分泌、免疫体质等）；5、知觉协调功能（视、听、嗅、味、触等）……
            </p>
            <p
              className={'leading-line-1 text-text-85 mt-6 text-sm lg:text-sm'}
            >
              建立数字量化的动态监测信息反馈技术应用（项目）…… 青少年成长期：PSD
              学习认知与大脑优势发展（测评与训练-服务项目）
            </p>
            <p
              className={'leading-line-1 text-text-85 mt-6 text-sm lg:text-sm'}
            >
              关注和致力于青少年成长期的各个阶段的‘学习、品格、行为、体质’等综合发展，对于提升‘学
              习内驱力’为核心为前提，巩固体质、提升专注力、强化大脑优势发展……
            </p>
          </motion.div>
        </li>
      </ul>

      {/*  section3 */}
      <div
        className={
          'layout relative bg-[#F4F4F4] py-20 after:absolute after:bottom-0 lg:after:top-0 lg:after:right-0' +
          ' after:left-0' +
          ' after:h-[34.5rem] after:w-full after:bg-cover' +
          " after:bg-[url('@/assets/images/technology-application/section3-bg.webp')]" +
          " lg:after:bg-[url('@/assets/images/technology-application/section3-bg-pc.webp')]" +
          ' after:bg-no-repeat'
        }
      >
        <motion.div
          initial={{ opacity: 0, y: -80 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 1 }}
          className={
            'text-primary border-primary relative z-10 border-b border-solid pb-2 text-center'
          }
        >
          <h2 className={'leading-line-1 layout-h2 font-bold'}>项目技术应用</h2>
          <p className={'leading-line-1 3xl:text-4xl text-base lg:text-3xl'}>
            （周期推选）
          </p>
        </motion.div>
        <ul
          className={
            'relative z-10 mt-16 space-y-10 lg:flex lg:items-start lg:justify-between'
          }
        >
          {section3List.map((item, index) => (
            <motion.li
              initial={{ opacity: 0, y: 120 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: index * 0.5 }}
              key={item.title1}
              className={
                '3xl:h-[20rem] rounded-8 border-[0.0490625rem] border-solid border-[#ECEBEF] bg-white px-5' +
                ' pt-8' +
                ' lg:h-[27rem] lg:w-[23%]' +
                ' pb-12'
              }
            >
              <img
                className={'3xl:w-[3.75rem] w-[3.25rem]'}
                src={item.icon}
                alt='icon'
              />
              <div className={'text-primary my-5 text-xl font-bold'}>
                <h2>{item.title1}</h2>
                <h2>{item.title2}</h2>
              </div>
              <p
                className={'leading-line-1 text-text-85 text-sm'}
                dangerouslySetInnerHTML={{ __html: item.message }}
              ></p>
            </motion.li>
          ))}
        </ul>
      </div>
    </div>
  )
}
